<template>
	<view class="main">
		<Header></Header>
		<view class="container">
			<!-- 导航栏 -->
			<view class="nav-bar">
				<view v-for="(item, index) in navList" :key="index" class="nav-bar-item"
					:class="{ active: currentIndex === index }" @click="switchComponent(index)">
					{{ item.text }}
				</view>
			</view>
			<!-- 条件渲染替代动态组件 -->
			<Community v-if="currentComponentName === 'Community'" />
			<Friends v-if="currentComponentName === 'Friends'" />
			<Ranking v-if="currentComponentName === 'Ranking'" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import Header from '@/pages/community/components/header.vue'
	import Community from '@/pages/community/community.vue'
	import Friends from '@/pages/community/friends.vue'
	import Ranking from '@/pages/community/ranking.vue'

	// 导航列表
	const navList = reactive([{
			text: '社区',
			name: 'Community'
		},
		{
			text: '交友圈',
			name: 'Friends'
		},
		{
			text: '排行榜',
			name: 'Ranking'
		}
	])

	// 当前选中的索引
	const currentIndex = ref(0)
	// 当前显示的组件名称（替代动态组件）
	const currentComponentName = ref(navList[currentIndex.value].name)

	// 切换组件
	const switchComponent = (index) => {
		currentIndex.value = index
		currentComponentName.value = navList[index].name
	}
</script>

<style lang="scss">
	.main {
		background: linear-gradient(#C8E6C9, #fff);
		.container {
			// margin: 0 50rpx auto;
			.nav-bar {
				width: 636rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 50rpx auto;
				border-radius: 48rpx;
				background-color: #E8F5E9;
				line-height: 90rpx;

				.nav-bar-item {
					width: 200rpx;
					font-size: 30rpx;
					line-height: 90rpx;
					color: #000000;
					text-align: center;

					&.active {
						// width: 70rpx;
						box-sizing: border-box;
						background-color: #8BC34A;
						border-radius: 50rpx;
					}
				}
			}
		}
	}
</style>